<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name='gwt:property' content='locale=en'>

    <title>Yui4Gwt example gallery</title>
    
    <script type="text/javascript" language="javascript" 
    	src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    	
    	
<!-- 	<script type="text/javascript"  -->
<!-- 		src="http://yui.yahooapis.com/3.3.0pr3/build/yui/yui.js"></script>  -->
    	
    	
<!--     	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0pr3/build/cssreset/reset-min.css">  -->
<!-- 	<link rel="stylesheet" type="text/css" href="http://axosoft.github.com/yui3-gallery/layout/build/assets/skins/sam/gallery-axo-layout.css">  -->
<!-- 	<link rel="stylesheet" type="text/css" href="http://axosoft.github.com/yui3-gallery/layout/build/assets/skins/sam/gallery-axo-layout-skin.css">  -->

	<script type="text/javascript" src="http://axosoft.github.com/yui3-gallery/layout/build/gallery-axo-layout.js"></script>
    	
    	<style>* {border: 1px solid #ededed}</style>
    	
  </head>
  <body class="yui3-skin-sam yui-skin-sam">

<script type="text/javascript">
YUI({filter: "DEBUG"}).use('gallery-axo-layout', 'resize', 'cssreset', function(Y)
		{
			// This creates a vertical layout whose size is tied to the window size
			var layout = new Y.Layout({orientation: 'vertical', sizeToWindow: true });
		 
			// This adds a child (layout unit) to the layout.  Since it is a vertical layout,
			// and this is the first child, it will show up on the top.  LayoutChild is
			// a widget, so it supports configuration arguments such as id and height.
			// The resize:true parameter will add resizing capability to the child.
			layout.add(new Y.LayoutChild({id:'top', height:100, resize: true }));
		 
			// This creates another layout and adds it as a child to the root layout,
			// resulting in a nested layout.  The fluid:true parameter means that the height
			// of this child will be determined by available space.
			var centerLayout = new Y.Layout({fluid: true, orientation: 'horizontal' });
			layout.add(centerLayout);
		 
			// This is another child layout, but with an initial fixed height and resizable.
			var bottomLayout = new Y.Layout({id:'bottom', height:100, orientation: 'horizontal', resize: true });
			layout.add(bottomLayout);
		 
			// We now fill up the center child layout. Two of the children have initial
			// fixed widths, and are collapsable and resizable.  The center child will be
			// sized according to available space.
			// We will also give the children standard module format sections and auto-generated headers,
			// by using the *Std layout children
			centerLayout.add(new Y.LayoutChildCollapsableStd({id: 'left', width:150, resize: true, label:'Left'}));
			centerLayout.add(new Y.LayoutChildStd({id: 'center', fluid: true, label:'Center' }));
			centerLayout.add(new Y.LayoutChildCollapsableStd({id: 'right', width:150, resize: true, label:'Right'}));
		 
			// The bottom layout will be divided into 4 parts.  The first part will have
			// a fixed width of 100 pixels.  The remaining three are given a weight using
			// the fluid argument.  They will fill up the remaining space, and their
			// weights will result in 1:2:3 proportions in their size.
			bottomLayout.add(new Y.LayoutChild({id: 'bottom1', width:100}));
			bottomLayout.add(new Y.LayoutChild({id: 'bottom2', fluid:1}));
			bottomLayout.add(new Y.LayoutChild({id: 'bottom3', fluid:2}));
			bottomLayout.add(new Y.LayoutChild({id: 'bottom4', fluid:3}));
		 
			layout.render();
		});
</script>

  </body>
</html>
